<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="股市">
        <el-card style="height: auto;" :body-style="{ padding: 0 }">

          <!-- 现有内容：superscript、搜索栏、表格等 -->

          <!-- 新增蜡烛图容器 -->
          <div ref="candleChart" style="width:100%; height:400px; margin:20px 0;"></div>

        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 说明卡片 -->
    <el-card style="height: 950px; margin: 10px 0px 2px 0px; background-color: rgba(200, 200, 200, 0.812);">
      <span v-html="info"></span>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import http from '../utils/request'

export default {
  name: 'stock_market_risk',
  data() {
    return {
      xAxis: [],                // x 轴数据
      candleData: [],           // 蜡烛图的 y 轴数据
      candleChartInstance: null // ECharts 实例
    }
  },
  methods: {
    onSubmit(market) {
      // 获取蜡烛图数据
      http.get("/api/-data", { params: { stock_name: market } })
          .then(res => {
            this.xAxis = res.data.xAxis || []
            this.candleData = res.data.yAxis || []
            this.drawCandleChart()
          })
          .catch(() => this.$message.warning('蜡烛图数据加载失败'))
    },
    drawCandleChart() {
      if (!this.candleChartInstance) {
        this.candleChartInstance = echarts.init(this.$refs.candleChart)
      }

      const option = {
        title: { text: '蜡烛图', left: 'center' },
        tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
        xAxis: { type: 'category', data: this.xAxis, boundaryGap: true },
        yAxis: { scale: true, splitArea: { show: true } },
        dataZoom: [
          { type: 'inside', start: 50, end: 100 },
          { type: 'slider', start: 50, end: 100 }
        ],
        series: [{
          name: '价格',
          type: 'candlestick',
          data: this.candleData,
          itemStyle: {
            color: '#ec0000', color0: '#00da3c',
            borderColor: '#8A0000', borderColor0: '#008F28'
          }
        }]
      }

      this.candleChartInstance.setOption(option)
    }
  },
  mounted() {
    // 页面初始化时加载默认图
    this.candleChartInstance = echarts.init(this.$refs.candleChart)
  }
}
</script>

<style lang="less" scoped>
/* 保持现有样式 */
</style>
